<!-- 我的拼团 -->
<template>
	<view class="page_box">
		<u-navbar title="安装维修">
			<view class="slot-wrap" slot="right">
				<u-icon name="plus-circle" size="40" @click="jump('/pages/user/repair/add-repair')"></u-icon>
			</view>
		</u-navbar>
		<!-- tab -->
		<view class="head_box">
			<view class="order-nav u-flex">
				<view class="nav-item u-flex-col u-flex-1 u-row-center u-col-center" v-for="nav in groupState" :key="nav.id" @tap="onNav(nav.id)">
					<view class="item-title">{{ nav.title }}</view>
					<text class="nav-line" :class="{ 'line-active': stateId === nav.id }"></text>
				</view>
			</view>
		</view>
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
		<view class="content_box">
			
			<block v-for="(item,index) in myGrouponList" :key="index">
				<view class="baoCard" style="position:relative;" @tap="tapdetail(1)">
					<view class="cardPosion cardColorb">{{item.status}}</view>
					<view class="cardMsg">
						<text class="cardShow">{{item.name}}</text>
						<text class="cardShow">{{item.mobile}}</text>
					</view>
					<view class="cardCenter top">
						<view class="cardText">故障类型</view>
						<view class="cardText">{{item.fault_id?item.fault_id:'-'}}</view>
					</view>
					<view class="cardCenter top">
						<view class="cardText">区域</view>
						<view class="cardSubtitle">{{item.quyu?item.quyu:'-'}}</view>
					</view>
					<view class="cardCenter bottom">
						<view class="cardText">报修时间</view>
						<view class="cardText">{{item.createtime}}</view>
					</view>
				</view>
			</block>
			
		</view>
		</mescroll-body>
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
	</view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins:[MescrollMixin], // 使用mixin
	components: {},
	data() {
		return {
			stateId: '1',
			myGrouponList: [], //我的拼团列表。
			upOption: {
				page: {
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: {
					tip: '暂无安装维修订单',
					icon:this.$IMG_URL + '/imgs/empty/empty_groupon.png'
				}
			},
			downOption:{},
			groupState: [
				{
					id: '1', //0
					title: '全部'
				},
				{
					id: '2', //1
					title: '待确认'
				},
				{
					id: '3', //2
					title: '已接单'
				},
				{
					id: '5', //3
					title: '维修中'
				},
				{
					id: '6', //3
					title: '待评价'
				},
				{
					id: '7', //3
					title: '已完结'
				}
			]
		};
	},
	computed: {},
	onLoad() {
	},
	methods: {
		upCallback(page){
			this.getOrderList(page);
		},
		onNav(id) {
			if (this.stateId !== id) {
				this.stateId = id;
				this.mescroll.resetUpScroll();
			}
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 我的订单
		getOrderList(page) {
			let pageNum = page.num;
			let pageSize = page.size;
			this.$get('/api/repair.user/order', {
				status: this.stateId,
				page: this.pageNum,
				nums:pageSize
			}, '加载中',false).then(res => {
				let curPageData = [];
				let curPageLen = curPageData.length; 
				let totalPage = 0;
				if (res.code === 1) {
					curPageData = res.data.data;
					curPageLen = curPageData.length; 
					totalPage = res.data.last_page;
				}
				else{}
				if(pageNum == 1) this.myGrouponList = [];
				this.myGrouponList = this.myGrouponList.concat(curPageData);
				this.mescroll.endByPage(curPageLen, totalPage);
			});
		}
	}
};
</script>

<style lang="scss">
// tab
.order-nav {
	background: #fff;
	height: 80rpx;

	.nav-item {
		flex: 1;

		.item-title {
			font-size: 30rpx;

			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 76rpx;
		}

		.nav-line {
			width: 120rpx;
			height: 4rpx;
			background: #fff;
		}

		.line-active {
			background: rgba(230, 184, 115, 1);
		}
	}
}
.slot-wrap {
	display: flex;
	align-items: center;
	padding-right: 20rpx;
}
.baoCard{
	margin:30upx 30upx 0 30upx;
	background:rgba(255,255,255,1);
	border:1upx solid rgba(239,239,239,1);
	box-shadow:0upx 4upx 12upx 0upx rgba(0, 0, 0, 0.1);
	border-radius:10upx;
}
.cardPosion{
	position:absolute;
	top: 0;
	right: 0;
	border-radius:0px 10upx 0px 10upx;
	color: #fff;
	font-size:22upx;
	padding:5upx 10upx;
}
.cardColora{
	background-color:#9FE3C7;
}
.cardMsg{
	padding:30upx 0;
	margin: 0 30upx;
	font-weight: bold;
	font-size: 32upx;
	border-bottom: 1upx solid #EFEFEF;
}
.cardShow{
	padding-right: 30upx;
}
.cardCenter{
	margin: 0 30upx;
	display: flex;
	justify-content: space-between;
}
.cardText{
	font-size: 28upx;
	font-weight: bold;
	color: #999;
}
.top{
	padding-top: 20upx;
}
.bottom{
	padding-top: 20upx;
	padding-bottom: 20upx;
}
</style>
